<template>
	
 <kb-layout>

	<!-- 5个按钮链接快捷 -->
	<view class="bg-white ">
		<view style="margin :20rpx 20rpx;">
		<up-subsection :list="['最新发布','捡漏榜','必看房源']" font-size="16px"
		 @change="i=>{bangtype=i; clearResult();fetchHouse()}"
		:current="bangtype"></up-subsection>
		</view>
	 
	</view> 
	<!-- 吸顶搜索bar -->
	 <u-sticky :offset-top="offsetTop">
	 <kb-drop-search :areas="ee.areas"  height="300" 
	 :zhutype="9"
	 v-model="params"
	 :showPrice="false"
	 :showHuxing="false"
	 @change="onSearchChange" ></kb-drop-search>
	 
	 <up-alert v-if="shotips"  :center="true" type = "warning" description = "没有找到相关房源,换个搜索条件试试"></up-alert>
	 
	</u-sticky>
<!--  -->
 	
	<view class="u-page" >

	<view v-if="sechouse.length>0" >
		<view class="house-items-ul">
			<view class="ul-li" v-for="(item, index) in sechouse" :key="index">
			
			 <kb-house-item :topnum="index" :house="item"></kb-house-item>
			
			</view>	
		</view>
	</view>
	 
  <up-empty v-if="isempty" mode="data" text="暂无房源"  :icon="ee.webUrl+'/images/empty/nodata.png'" > </up-empty>
	
	 
	<view v-if="(!isempty && nomore)" class="findmore"> 已经到底线了</view>
	
	
	</view>
	<kb-footer :color="ee.primayColor" ></kb-footer>
	
 
</kb-layout>
</template>
 
<script>
	import util from "@/common/tools/utils.js";
	import {
		sys
	} from "../../uni_modules/uview-plus";
	export default {
		data() {
			return {
				zhutype : 0,
				rent_type : 0,
				sechouse: [],
				page: 1,
				total:0,
				pagesize: 10,
				nomore: false, 		 
				params:{}, //搜索的赋值和初始化可以给搜索组件内传递数据
				onfetch: false, //记录正在取房源标志 
				shotips: false,//显示无房源提示
				issearch: false,
				bangtype: 1, //默认捡漏帮
				offsetTop: sys().statusBarHeight,
			}
		},
		computed:{
			isempty(){
				return  this.total==0;
			} 
		},
		methods: {
			 onSearchChange(form){
				console.log('house-search-change', form);
				//把搜索bar选择的值组合成搜索参数
				var params = {};
				
				if(form.areas?.isok){
					//按区域的title搜索
					params.area = form.areas.area.title;
					//按小区的id搜索
					if(form.areas.street?.id){
						//params.village_id = form.areas.street.id;
						params.quan = form.areas.street.title;
					}
						
				}
				if(form.prices?.isok){
					
					if(form.prices.minprice && form.prices.maxprice){
						params.minprice = form.prices.minprice;
						params.maxprice = form.prices.maxprice;
					}
					
					if( form.prices.price) {
						var p = form.prices.price.split('-');
						params.minprice = p[0];
						params.maxprice = p[1];
					}
				}
				if(form.rooms?.isok){
					params.room = [];
					for(var r in form.rooms.room ){
						 if(form.rooms.room[r])
							params.room.push(r)
					}
				}
				if(form.extend?.isok){
					 for(var item in form.extend){
						 params[item] = [];
						 for(var r in form.extend[item]){
							  if(form.extend[item][r]){
								   params[item].push(r)
							  }
						 }
					 }
				}
				if(form.keyword){
					params.keyword = form.keyword;
				}
				this.params = params;
				this.clearResult()
				this.fetchHouse( true )
			 },
			 clearResult(){
				this.issearch = true;
				this.sechouse = [];
				//初始化搜索
				this.page = 1; 
				this.nomore = false; 
			 },
			fetchHouse( issearch = false){
				
				uni.showLoading({title: 'Loading...'});				
				
				util.getSechouseList(
					{ 
						ishot:1,
						notype:1,
						order:4, //榜单的排行
						page: this.page  ,
						pagesize: this.pagesize,
						bangtype: this.bangtype,
						...this.params, 
					}
				).then(
					(ret) => {
							 
						if(ret.items.length>0){	
							this.shotips = false; 
							this.page = this.page +1;							
							this.total = ret.total;					
							this.sechouse = this.sechouse.concat(ret.items);
						} else {
							if(issearch){
								this.shotips = true;
							}
						}
						uni.hideLoading();
						
					}
				) 
			}
		},
		onLoad(option) {
			this.zhutype = option?.zhutype || 0;	
			this.bangtype = option.type ? option.type : 1;
			if(option.keyword){
				this.params.keyword = option.keyword
			}
			this.fetchHouse();
			console.log(this.areas)
		},
		onPullDownRefresh(){
			this.page = 1; 
			this.sechouse = [];
			this.nomore = false; 
			this.fetchHouse()
			setTimeout(()=>{ uni.stopPullDownRefresh() },1000)
			
		},
		onPageScroll(e) {
			 
		},
		onReachBottom() {
			if(this.total  && this.total < this.page * this.pagesize) 
				this.nomore = true;
			else
			   this.total >1 &&  this.fetchHouse();
			
			this.shotips = false;	
			return true;
			 
		},
	}
</script>

<style lang="scss">
	.kb-submenu {
		display: flex;
		justify-content: center;
		 gap: 50rpx;
	}
	
	.kb-submenu-btn {
		display: flex;
		text-align: center;
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		line-height: 60rpx;
	}
	.bg-white {
		background: #fff !important;
		padding: 30rpx;
		padding-top: 60rpx;
	}
.u-page{
	background: #fff !important;
	padding: 30rpx;
	min-height: 70vh;
    padding-top: 30rpx;
}
.house-items-ul .ul-li{
	border-bottom: 1px solid #dadada;
}
.house-items-ul .ul-li:last-child{
	border-bottom: 0;
}
</style>
